<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <el-icon style="margin-right: 5px"><Location /></el-icon>
      <span> {{ placeholder }}</span>
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <div v-if="isNotEmpty(_value)">
        <img :src="_value" @click="showSignPanel" width="40%" />
        <div>点击签名重签</div>
      </div>
      <el-button size="default" v-else :icon="Edit" @click="showSignPanel">点击签字</el-button>
      <w-dialog title="请使用鼠标签字" width="700px" v-model="visible" @ok="signOk">
        <canvas id="signPanel"></canvas>
      </w-dialog>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly" class="m-sign">
      <div v-if="isNotEmpty(_value)">
        <img :src="_value" @click="showSignPanel" style="width: 40%" />
        <div>点击签名重签</div>
      </div>
      <field v-else readonly @click="showSignPanel" :placeholder="placeholder">
        <template #right-icon>
          <el-icon><Edit /></el-icon>
        </template>
      </field>
      <popup v-model:show="visible" :style="popupStyle" position="left" lazy-render safe-area-inset-bottom>
        <nav-bar placeholder title="请签字" left-text="返回" right-text="确定" left-arrow @click-left="visible = false" @click-right="signOk"/>
        <div class="m-sign-panel">
          <canvas id="signPanel" height="200px"></canvas>
        </div>
      </popup>
    </div>
    <div v-else>
      <img :src="_value" width="40%" />
    </div>
  </div>
</template>

<script>
import { Location, Edit } from '@element-plus/icons-vue'
import { isNotEmpty } from '/@/utils/utils'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import { Field, Popup, NavBar } from 'vant'
import { reactive, toRefs, nextTick, computed } from 'vue'
import SignaturePad from 'signature_pad'

export default {
    name: 'SignPanel',
    mixins: [componentMinxins],
    components: { Field, Popup, NavBar, Location, Edit },
    props: {
        modelValue: {
            default: null,
        },
        placeholder: {
            type: String,
            default: '请签字',
        },
        thickness: {
            type: Number,
            default: 2,
        },
        color: {
            type: String,
            default: '#000',
        },
    },
    setup(props, context) {
        const { mode, color, thickness, modelValue } = toRefs(props)
        const state = reactive({
            visible: false,
            signImg: '',
            hasSign: false,
            signaturePad: null,
            popupStyle: {
                height: '100%',
                width: '100%',
                background: '#FFFFFF',
            }
        })
        const _value = computed({
            get: () => {
                return modelValue.value
            },
            set: val => {
                context.emit('update:modelValue', val)
            }
        }) 
        const initSign = () => {
            state.hasSign = false
            if (state.signaturePad) {
                state.signaturePad.clear()
            } else {
                let canvas = document.getElementById('signPanel')
                if (mode.value === 'MOBILE'){
                    canvas.setAttribute('height', '200px')
                }else {
                    canvas.setAttribute('width', '650px')
                    canvas.setAttribute('height', '300px')
                }
                state.signaturePad = new SignaturePad(canvas, {
                    penColor: color.value,
                    minWidth: thickness.value,
                    maxWidth: thickness.value + 2,
                })

                state.signaturePad.onEnd = () => {
                    state.hasSign = true
                    //_value.value = state.signaturePad.toDataURL()
                }
                if (mode.value === 'MOBILE') {
                    //canvas.height = 300 ;
                    canvas.width = document.body.clientWidth
                }
                // resizeCanvas(canvas)
            }
        }
        const resizeCanvas = (canvas) => {
            var ratio = Math.max(window.devicePixelRatio, 1, 1)
            canvas.width = canvas.offsetWidth * ratio
            canvas.height = canvas.offsetHeight * ratio
            canvas.getContext('2d').scale(ratio, ratio)
            state.signaturePad.clear()
        }
        const showSignPanel = () => {
            state.visible = true
            nextTick(() => {
                initSign()
            })
        }
        const signOk = () => {
            state.visible = false
            _value.value = state.signaturePad.toDataURL()
            /*imgZip(state.signaturePad.toDataURL("image/jpeg"), state.signaturePad, base64 => {
                _value.value = base64
            })*/
            //_value.value = canvas.toDataURL("image/jpeg", 0.5)
        }
        return {
            ...toRefs(state),
            isNotEmpty,
            initSign,
            resizeCanvas,
            showSignPanel,
            signOk,
            Edit,
            _value
        }
    }
}
</script>

<style lang="scss" scoped>
canvas {
  border: 1px dashed #666666;
}
img {
  cursor: pointer;
  border: 1px solid white;
  width: 40% !important;
  &:hover {
    border: 1px dashed var(--el-color-primary);
  }
}
.m-sign-panel {
  margin: 40px 0;
  background: var(--next-aside-bgc);
  canvas {
    border: 1px;
  }
}
</style>